<template>
  <div class="search-bar">
    <div class="search">
      <div class="select-time">
        <div class="item start">
          <div class="name">住</div>
          <div class="date">{{startDateStr}}</div>
        </div>
        <div class="item end">
          <div class="name">离</div>
          <div class="date">{{endDateStr}}</div>
        </div>
      </div>
      <div class="content">
        <div class="keywor">关键字/位置/民宿</div>
      </div>
      <div class="right">
        <img src="@/assets/img/searchBar/search.svg" alt="">
      </div>
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { computed } from 'vue'
import {formatMonthDay} from "@/utils"
import useMainStore from '@/store/modules/main'

const mainStore = useMainStore()
const {startDate, endDate} = storeToRefs(mainStore)
const startDateStr = computed(() => formatMonthDay(startDate.value))
const endDateStr = computed(() => formatMonthDay(endDate.value))
</script>

<style lang='less' scoped>
.search-bar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 45px;
  padding: 16px;
  background: #fff;
  .search{
    display: flex;
    align-items: center;
    padding: 5px;
    background: #e6e6e6;
    border-radius: 5px;
    justify-content: space-between;
  }
}
.select-time{
  border-right: 1px solid #fff;
  .item{
    display: flex;
  }
}
.right{
  img{
    width: 26px;
  }
}
</style>